<template>
  <div>
    <div  v-if="loading" style="margin-top: 120px">
      <dv-loading >Waiting...</dv-loading>
    </div>
    <div>

      <div id="bottomLeftChart" style="width: 100%;height: 400px"></div>
    </div>
  </div>
</template>

<script>
import echartMixins from "@/utils/resizeMixin";

export default {
  data() {
    return {
      chart: null,
      precision: 0.8,
      recall: 0.75,
      f1Score: 0.77,
      loading: true
    };
  },
  mixins: [echartMixins],
  mounted() {
    this.$bus.$on('chanLoadingTrainState', () => {
      this.loading = false
    })
    this.$bus.$on('getTrainData', (data) => {
      var processData = this.processTrainData(data)
      this.draw(processData);
      this.dta = data
    })
  },
  beforeDestroy() {
    // 组件被销毁了，不能进行数据传输
    // 解绑事件
    this.$bus.$off('getTrainData')
  },
  methods: {
    processTrainData(data) {
      const supportArr1 = [];
      const supportArr2 = [];
      const supportArr3 = [];
      let supportArr = [];
      for (let i = 0; i < 6; i++) {
        supportArr1.push(data[i + ""]["precision"]);
        supportArr2.push(data[i + ""]["recall"]);
        supportArr3.push(data[i + ""]["f1-score"]);
      }
      supportArr.push(supportArr1);
      supportArr.push(supportArr2);
      supportArr.push(supportArr3);
      return supportArr;
    },
    draw(processData) {

      let category = [
        "类别0",
        "类别1",
        "类别2",
        "类别3",
        "类别4",
        "类别5"
      ];
      // let precisionData = [
      //   0.8,
      //   0.7,
      //   0.9,
      //   0.5,
      //   0.6,
      //   0.7
      // ];
      // let recallData = [
      //   0.75,
      //   0.8,
      //   0.85,
      //   0.6,
      //   0.7,
      //   0.65
      // ];
      // let f1ScoreData = [
      //   this.f1Score,
      //   this.f1Score,
      //   this.f1Score,
      //   this.f1Score,
      //   this.f1Score,
      //   this.f1Score
      // ];

      this.chart = this.$echarts.init(document.getElementById("bottomLeftChart"));
      // --------------------------------------------------------------
      let option = {
        textStyle: {
          fontSize: 20
        },
        title: {
          text: "",
          x: "center",
          y: 0,
          textStyle: {
            color: "#B4B4B4",
            fontSize: 16,
            fontWeight: "normal"
          }
        },
        tooltip: {
          trigger: "axis",
          backgroundColor: "rgba(255,255,255,0.1)",
          axisPointer: {
            type: "shadow",
            label: {
              show: true,
              backgroundColor: "#7B7DDC"
            }
          },
          formatter: function (params) {
            let res = params[0].axisValue + "<br/>";
            res += "precision: " + params[0].data.toFixed(2) + "<br/>" + "recall: " + params[1].data.toFixed(2) + "<br/>" + "f1-score: " + params[2].data.toFixed(2);
            return res;
          }
        },
        legend: {
          data: ["precision", "recall", "f1-score"],
          textStyle: {
            color: "#B4B4B4"
          },
          top: "0%"
        },
        grid: {
          x: "8%",
          width: "80%",
          y: "10%"
        },
        xAxis: {
          data: category,
          axisLine: {
            lineStyle: {
              color: "#B4B4B4"
            }
          },
          axisTick: {
            show: false
          },
          axisLabel: {
            fontSize: 16
          }
        },
        yAxis: [
          {
            splitLine: {show: false},
            axisLine: {
              lineStyle: {
                color: "#B4B4B4"
              }
            },
            axisLabel: {
              formatter: "{value} "
            }
          }
        ],
        series: [
          {
            name: "precision",
            type: "bar",
            barWidth: 20,
            itemStyle: {
              normal: {
                barBorderRadius: 5,
                color: "#956FD4"
              }
            },
            data: processData[0]
          },
          {
            name: "recall",
            type: "bar",
            barWidth: 20,
            itemStyle: {
              normal: {
                barBorderRadius: 5,
                color: "#01B27A"
              }
            },
            data: processData[1]
          },
          {
            name: "f1-score",
            type: "bar",
            barWidth: 20,
            itemStyle: {
              normal: {
                barBorderRadius: 5,
                color: "#FDB813"
              }
            },
            data: processData[2]
          }
        ]
      };
      this.chart.setOption(option);
    }

  },
  destroyed() {
    window.onresize = null;
  }
};
</script>

<style lang="scss" scoped>
</style>
